<!--
 * @Description: 应用列表
 * @Author: seadon & zhaoxiaoyang
 * @LastEditors: seadon
 * @Date: 2021-07-16 16:18:59
 * @LastEditTime: 2022-09-22 18:05:41
-->
<template>
	<div v-if="isPcSearch" style="width: 98%;">
		<div v-for="item in data" :key="item.group_id">
			<!-- 卡片模式 -->
			<ListSkeleton v-if="mode === ListModeEnum.Card && loading" />
			<pok-list-card
				v-else-if="mode === ListModeEnum.Card"
				:data="item.list"
				:group="{
					name: item.group_name,
					groupId: item.group_id,
					total: item.total,
				}"
				:pcAppCardType="pcAppCardType"
				:cardStyleType="cardStyleType"
				:all-loading="allLoading"
				@on-collection-events="handleCollectionEvents"
				@on-save-recent="saveRecent"
				@on-get-all="handleGetAllCard"
			/>

			<!-- 表格模式 -->
			<TableSkeleton v-if="mode === ListModeEnum.Table && loading" />
			<pok-list-table
				v-else-if="mode === ListModeEnum.Table"
				:data="item.list"
				:group="{
					name: item.group_name,
					groupId: item.group_id,
					total: item.total,
				}"
				:all-loading="allLoading"
				@on-collection-events="handleCollectionEvents"
				@on-save-recent="saveRecent"
				@on-get-all="handleGetAllCard"
			/>
		</div>
	</div>
	<div v-else>
		<!-- 卡片模式 -->
		<ListSkeleton v-if="mode === ListModeEnum.Card && loading" />
		<pok-list-card-all
			v-else-if="mode === ListModeEnum.Card"
			:data="data"
			:allTotal="allTotal"
			:allTotalLength="allTotalLength"
			:pcAppCardType="pcAppCardType"
			:cardStyleType="cardStyleType"
			:all-loading="allLoading"
			@on-collection-events="handleCollectionEvents"
			@on-save-recent="saveRecent"
			@on-get-all="handleGetAllCard"
		/>
		<!-- 表格模式 -->
		<TableSkeleton v-if="mode === ListModeEnum.Table && loading" />
		<pok-list-table-all
			v-else-if="mode === ListModeEnum.Table"
			:allTotal="allTotal"
			:allTotalLength="allTotalLength"
			:data="data"
			:all-loading="allLoading"
			@on-get-all="handleGetAllCard"
			@on-collection-events="handleCollectionEvents"
			@on-save-recent="saveRecent"
		/>
	</div>
</template>

<script lang="ts">
export default {
	name: 'PokApplicationList',
}
</script>
<script setup lang="ts">
import { defineProps, defineEmits, ref, computed } from 'vue'
import { CategorySkeleton, ListSkeleton, TableSkeleton } from '../../skeleton'
import { message } from 'ant-design-vue'
import PokListCard from './ListCard.vue'
import PokListCardAll from './ListCardAll.vue'
import PokListTable from './ListTable.vue'
import PokListTableAll from './ListTableAll.vue'
import useModel from '../../hooks/useModel'
import { ListModeEnum } from '../../constant/listEnum'
import type { IApplicationList } from '../../type'
import { useStore } from 'vuex'
import { i18n } from '@/locales'

const props = defineProps<{
	data: IApplicationList[]
	mode: string
	loading: boolean
	allLoading: boolean
	isPcSearch: boolean
	allTotal: any
	pcAppCardType: string
	allTotalLength: any
}>()

const emit = defineEmits(['onUpdateList', 'onGetAll'])
const { $t: iTrans } = i18n
const { saveFavorite, saveRecent } = useModel({ emit })
const store = useStore()
const cardStyleType = ref('CardStyleA')

const handleCollectionEvents = async (
	type: string,
	id: string,
	group_id: string,
	item: any
) => {
	if (store.state.collectNumber < 10 || type === '0') {
		const res = await saveFavorite(id, type, group_id)
		if (res.code === '000000') {
			item.collected = !item.collected
		}
	} else {
		message.error(
			iTrans(
				'pages.home.warningTip',
				'最多可收藏10条，请先移除一部分收藏后再添加新的收藏'
			)
		)
	}
}
const handleGetAllCard = (groupId: string) => {
	emit('onGetAll', groupId)
}
</script>
